<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>晚点点名记录</title>
    <link rel="stylesheet" href="/plug/layui/css/layui.css">
</head>
<body>
<div style="margin: 20px">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal" type="button" onclick="exportExcel()">导出</button>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">学生名</label>
                <div class="layui-input-inline">
                    <input type="text" name="uName" autocomplete="off" class="layui-input" th:value="${uName == null ? '' : uName}">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <select name="status">
                        <option value="">请选择</option>
                        <option value="1" th:selected="${status == 1}">宿舍</option>
                        <option value="2" th:selected="${status == 2}">申请晚归</option>
                        <option value="3" th:selected="${status == 3}">回家</option>
                        <option value="4" th:selected="${status == 4}">未签到</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-form-select">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-block">
                    <select name="gId" lay-filter="grade">
                        <option value="">请选择</option>
                        <option th:each="data: ${gradeList}" th:value="${data.id}" th:selected="${data.id == gId}" th:text="${data.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-form-select">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-block">
                    <select name="cId" lay-verify="required" lay-filter="class">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-inline">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="startTime" placeholder="开始时间" autocomplete="off" class="layui-input" th:value="${startTime == null ? '' : startTime}">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="endTime" placeholder="结束时间" autocomplete="off" class="layui-input" th:value="${endTime == null ? '' : endTime}">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" type="button" onclick="search()">检索</button>
                <button class="layui-btn" type="reset">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-table">
        <thead>
        <tr>
            <th>学生名</th>
            <th>年级</th>
            <th>点名状态</th>
            <th>备注</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="data : ${page.records}">
            <td th:text="${data.uName}"></td>
            <td th:text="${data.gName + '' + data.cName}"></td>
            <td th:text="${data.status == 1 ? '宿舍' : (data.status == 2 ? '申请晚归' : (data.status == 3 ? '回家' : '未签到'))}"></td>
            <td th:text="${data.remarks}"></td>
            <td th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
        </tr>
        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
    $("input[type=reset]").click(function () {
        $(".layui-form select").val("");
    });
    layui.use(['form', 'laypage', 'laydate'], function() {
        const form = layui.form;
        const page = layui.laypage;
        const date = layui.laydate;

        date.render({
            elem: 'input[name=startTime]'
        })

        date.render({
            elem: 'input[name=endTime]'
        })

        form.render('select');
        page.render({
            elem: 'page',
            count: [[${page.total}]],
            limit: 10,
            curr: [[${page.current}]],
            jump: function (obj, first) {
                if(first) {
                    return;
                }
                location.href = `/nightSpot/list?pageNo=${obj.curr}&${$("#search-form").serialize()}`;
            }
        });

        form.on('select(grade)', function (data) {
            $.get("/gradeClass/getClassByGrade?id=" + data.value, function (res) {
                if(res.code === 200) {
                    $('select[name=gradeClassId]').empty();
                    $('select[name=gradeClassId]').append('<option value="">请选择</option>');
                    $(res.data.list).each(function () {
                        $('select[name=gradeClassId]').append(`<option value="${this.id}" ${this.id === [[${gradeClassId == null ? -1 : gradeClassId}]] ? 'selected' : ''}>${this.name}</option>`);
                    })
                    form.render('select');
                }
            })
        })

        $('select[name=gId]').siblings("div.layui-form-select").find('dl dd[lay-value=' + $("select[name=cId]").val() + ']').click();
    });

    function search() {
        location.href = '/nightSpot/list?pageNo=1&' + $(".layui-form").serialize();
    }

    function exportExcel() {
        layer.confirm('导出数据为当前查询出的数据！', {
            btn: ['确定', '取消'] //按钮
        }, function() {
            location.href = "/nightSpot/exportExcel?" + $(".layui-form").serialize();
            layer.closeAll('dialog');
        });
    }
</script>
</body>
</html>